<template>
  <div class="search_modules">
    <headerNav />
    <div class="mincard mindWidth">
      <span @click="$router.push('/')">首页</span>>
      <span>查企业</span>
    </div>
    <div class="search_border">
      <div class="mindWidth search_max">
        <div class="seach_centent">
          <div class="search_bar">
            <input
              type="text"
              placeholder="请输入你想要查询的企业名称"
              v-model="dataName"
              @input="changeInput"
              @focus="getList"
              @blur="leave"
            />
            <button @click="getDateList(1)">
              <i class="el-icon-search"></i> 搜索
            </button>
          </div>

          <div class="noData" v-show="isShow">
            <ul>
              <li
                class="changeHanld"
                v-for="(item, index) in inputList"
                :key="index"
                v-show="inputList.length > 0"
                @click="hanldClick3(item.companyId)"
              >
                <span v-html="item.companyName"></span>
              </li>
              <li v-show="dataName != '' && isShow2 && !inputList.length">查不到相关的公司</li>
            </ul>
          </div>
          <div class="search_hotname">
            <p>热门搜索:</p>
            <span
              v-for="item in hotSearchList"
              :key="item.sourceId"
              class="changeHanld"
              @click="hanldClick2(item.sourceId)"
            >{{ item.name }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="isDataList mindWidth">
      <!-- 没有数据 -->
      <div class="nullData" v-if="company.length == 0">
        <img src="../../../static/image/noDataBox.png" alt />
        <span v-show="dataName == ''">请输入企业名称检索</span>
        <span v-show="dataName != '' && inputList == ''">未匹配到相关企业</span>
      </div>
      <!-- 有数据 -->
      <div class="yearData" v-if="company.length != 0">
        <div class="title_bar">
          为你找到
          <span>{{ totalVal }}</span> 家公司
        </div>

        <div
          class="DataList changeHanld"
          v-for="(item, index) in company"
          :key="index"
          :class="currentIndex == index ? 'active' : ''"
          @mouseenter="currentIndex = index"
          @mouseleave="currentIndex = null"
        >
          <!-- @click="hanldeClick(item.companyId)" -->
          <a :href="'/enterprise/honor/'+item.companyId" target="blank">
            <h2 v-html="item.companyName"></h2>

            <div class="dataList_content">
              <div class="userInfo">
                <span>法定代表人: {{ item.legalPerson }}</span>
                <span>注册资本:{{ item.registeredCapital }}</span>
                <span>成立时间: {{ item.establishTime }}</span>
              </div>
              <div class="address">
                <span>地址:{{ item.companyAddress }}</span>
              </div>
            </div>
          </a>
        </div>
      </div>
    </div>
    <!-- 分页 -->
    <div class="departmentInside_bottom">
      <paging @CurrentPage="changePageNo" :total="totalVal" :pageNo="pageNo"></paging>
    </div>
    <navigation />
    <footerNav />
  </div>
</template>

<script>
import { commonRequest, postRequest } from "../../api/api.js";
import paging from "../../components/PageQuery.vue";
import { checkSearch, compare } from "../../util/esCheck.js";
import {
  getCompany,
  getCompanySsr,
  getSearchKeywordsInfo,
  getSearchKeywordsInfoSsr
} from "../../api/home.js";
export default {
  components: {
    paging
  },
  head() {
    return {
      title: "查企业-比目镜",
      meta: [
        { hid: "keywords", name: "keywords", content: "查企业，搜索" },
        { hid: "description", name: "description", content: "输入企业查询搜索" }
      ]
    };
  },
  data() {
    return {
      currentIndex: 0,
      dataName: "",
      hotSearchList: [], // 关键字列表
      company: [], // 数据列表
      pageNo: 1,
      totalVal: 0,
      inputList: [], // 监听表单中的值
      isShow: false, // 显示模糊匹配框
      isShow2: false, // 是否显示

      showList: true // 搜索框焦点
    };
  },
  watch: {
    $route: {
      handler(val) {
        if (JSON.stringify(val.query) == "{}") {
          // this.hotSearchList = [];
        } else {
          let { id } = val.query;
          this.dataName = id;
          if (id == this.dataName && this.dataName != "") {
            this.getDateList();
          }
        }
      },
      deep: true,
      immediate: true
    }
  },
  mounted() {
    // this.getHotKeyWord();
  },
  async asyncData({ store, route }) {
    let name = route.query.id || "";
    let hotData;
    // if (process.server) {
    //   hotData = await getSearchKeywordsInfoSsr("company");
    // } else {
    hotData = await getSearchKeywordsInfo("company");
    // }
    let params = {
      companyName: name,
      pageIndex: 1,
      area: "",
      city: "",
      companyId: "",
      endLat: 0,
      endLng: 0,
      pageSize: 10,
      province: "",
      startLat: 0,
      startLng: 0
    };
    let data;
    // if (process.server) {
    //   data = await getCompanySsr(params);
    // } else {
    data = await getCompany(params);
    // }
    return {
      company: data.data.content,
      totalVal: data.data.totalElements,
      hotSearchList: hotData.result
    };
  },
  methods: {
    // 搜索框是否有焦点，判断模糊匹配列表是否展示
    getList() {
      this.showList = true;
    },
    leave() {
      this.showList = false;
    },
    // 点击搜索栏的数据列表
    hanldClick3(id) {
      window.open("/Enterprise/honor?id=" + id, "_blank");
      this.isShow = false;
      this.isShow2 = false;
    },
    // 点击关键字
    hanldClick2(id) {
      window.open("/Enterprise/honor?id=" + id, "_blank");
    },
    // 点击列表数据
    hanldeClick(id) {
      window.open("/enterprise/honor?id=" + id, "_blank");
    },
    // 接受当前选中页数
    changePageNo(value) {
      this.pageNo = value;
      this.getDateList();
    },
    /* 获取关键字 */
    getHotKeyWord() {
      const type = "company";
      commonRequest("/api/home/getSearchKeywordsInfo", {
        type
      }).then(res => {
        this.hotSearchList = res;
      });
    },
    // 点击搜索按钮
    async getDateList(index) {
      // if (this.dataName != "") {
      if (index == 1 && this.dataName != "") {
        this.pageNo = index;
      }
      if (!checkSearch(this.dataName)) {
        this.company = [];
        this.totalVal = 0;
        return;
      }
      let params = {
        companyName: this.dataName,
        pageIndex: this.pageNo,
        area: "",
        city: "",
        companyId: "",
        endLat: 0,
        endLng: 0,
        pageSize: 10,
        province: "",
        startLat: 0,
        startLng: 0
      };
      let res = await getCompany(params);
      this.isShow2 = false; // 公司数据列表
      this.changeText(res.data.content, "companyName", this.dataName);
      this.company = res.data.content;
      this.isShow = false; // 显示模糊匹配框
      this.totalVal = res.data.totalElements;
      // } else {
      //   this.$message({
      //     type: "warning",
      //     message: "请输入公司名称"
      //   });
      // }
    },
    // 监听input的值
    async changeInput() {
      this.isShow = false; // 显示模糊匹配框
      if (this.dataName != "") {
        let params = {
          companyName: this.dataName,
          pageIndex: this.pageNo,
          area: "",
          city: "",
          companyId: "",
          endLat: 0,
          endLng: 0,
          pageSize: 10,
          province: "",
          startLat: 0,
          startLng: 0
        };
        let res = await getCompany(params);
        if (res.retCode == 0) {
          this.changeText(res.data.content, "companyName", this.dataName);
          this.inputList = res.data.content;
          this.isShow = true;
        } else {
          this.isShow2 = true;
        }
      }
    },
    loseFocus() {
      this.isShow = false;
    },
    // 关键字标明红色
    changeText(result, key, val) {
      if (val != "") {
        let arr = val.split("");
        let old = [];
        arr.forEach(el => {
          old.push(el);
        });
        let arrText = [];
        result.forEach((el, index) => {
          el[key].split("").forEach(el1 => {
            arr.forEach(val => {
              if (val.indexOf(el1) !== -1) {
                el[key] = el[key].replace(
                  new RegExp(el1, "g"),
                  `<em style=color:red;font-style:normal;>${el1}</em>`
                );
              }
            });
          });
        });
        return result;
      }
    }
  }
};
</script>

<style lang="less" scoped>
.contents_qydb {
  width: 200px;
  margin-left: 22px;
  margin-top: 20px;
  // text-align: center;
  // position: relative;
  .goVip {
    display: flex;
    flex-direction: column;
    position: absolute;
    bottom: 55px;
    align-items: center;
    justify-content: center;
    width: 100%;
    left: 0;

    .top {
      font-size: 14px;
      color: #000;
    }

    .bn {
      font-size: 14px;
      color: #1d78de;
    }
  }
}

.el-dialog__footer {
  height: 340px;
  position: relative;
}

.option {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 40px;
  bottom: 10px;
  width: 100%;
  font-size: 14px;
  left: 0;

  .spans_qydb {
    background-color: #bfbfbf;
    padding: 4px 30px;
    color: #fff;
    cursor: pointer;
    border-radius: 30px;
  }

  .ps_qydb {
    border-radius: 30px;
    background-color: #1d78de;
    padding: 4px 30px;
    color: #fff;
    cursor: pointer;
    // bottom: 15px;
    // right: 26px;
    // width: 159px;
    // height: 44px;
    // cursor: pointer;
  }
}

.el-dialog {
  border-radius: 10px;
}

.imgs_qydb {
  width: 100%;
  border-radius: 10px;
}
.departmentInside_bottom {
  margin-top: 40px;
  margin-bottom: 60px;
  padding: 0px 20px;
  text-align: right;
}

.search_modules {
  .mincard {
    span {
      font-size: 14px;
      cursor: pointer;
      margin: 0 10px;
    }
  }

  .search_border {
    height: 160px;
    display: flex;
    align-items: center;

    flex-direction: column;
    background-color: #fff;

    .search_max {
      display: flex;
      height: 100%;
      align-items: center;
      justify-content: center;

      .seach_centent {
        position: relative;
        display: flex;
        justify-content: center;
        width: 790px;
        flex-direction: column;
        height: 100%;

        .search_bar {
          position: relative;
          width: 790px;
          display: flex;
          align-items: center;

          input {
            height: 60px;
            width: 670px;
            border: 1px solid #44a2ff;
            border-radius: 4px 0 0 4px;
            font-size: 20px;
            padding-left: 10px;
            color: #000;

            &::placeholder {
              color: #ddd;
              font-size: 20px;
            }
          }

          button {
            border-radius: 0px 4px 4px 0;
            height: 60px;
            width: 120px;
            font-size: 18px;
            color: #fff;

            i {
              font-size: 18px;
              color: #fff;
            }
          }
        }

        .search_hotname {
          display: flex;
          align-items: center;
          justify-content: flex-start;
          margin-top: 20px;

          p {
            font-size: 16px;
            color: #000;
            margin-right: 10px;
          }

          span {
            color: #ccc;
            margin: 0 10px;
            font-size: 16px;
          }
        }

        .noData {
          position: absolute;
          background-color: #fff;
          left: 0;
          width: 670px;
          top: 100px;
          overflow: hidden;
          z-index: 99;
          max-height: 200px;

          ul {
            padding-left: 20px;

            li {
              height: 50px;
              display: flex;
              align-items: center;
              border-bottom: 1px solid rgba(154, 154, 154, 0.2);
            }
          }
        }
      }
    }
  }

  .dataBox {
    position: absolute;
    left: 0;
    top: 0;
  }

  .isDataList {
    .nullData {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin: 138px auto;

      span {
        color: #ccc;
        font-size: 14px;
        margin-top: 10px;
      }

      img {
        width: 280px;
      }
    }

    .yearData {
      background-color: #fff;
    }

    .title_bar {
      background: #f4f4f4;
      height: 80px;
      display: flex;
      align-items: center;
      font-size: 16px;

      span {
        color: #44a2ff;
        font-size: 16px;
        margin: 0 10px;
      }
    }

    .DataList {
      height: 120px;
      padding: 0 20px;
      display: flex;
      justify-content: center;
      flex-direction: column;

      h2 {
        font-size: 18px;

        &:hover {
          color: #44a2ff;
        }
      }

      .dataList_content {
        display: flex;
        justify-items: center;
        flex-direction: column;

        .userInfo {
          margin: 10px 0;

          span {
            color: #999;
            font-size: 14px;
            margin-right: 40px;
          }
        }

        .address {
          span {
            color: #999;
            font-size: 14px;
          }
        }
      }

      &.active {
        background-color: #fff;
        box-shadow: rgba(204, 204, 204, 0.2) -1px 3px 1px;
      }
    }
  }
}
</style>
